const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CopyWebpackPlugin = require("copy-webpack-plugin");
const webpack = require("webpack");
const webpackDev = require("./build/dev");
const webpackPro = require("./build/pro");
const path = require("path");
const { buildPath } = require("./build/config");

let isDev = process.env.NODE_ENV === "development";

let config = {
  mode: isDev ? "development" : "production",
  entry: [
    isDev && "react-hot-loader/patch",
    path.resolve(__dirname, "src/main.tsx"),
  ].filter(Boolean),
  output: {
    publicPath: isDev ? "/" : "./",
    path: path.resolve(__dirname, buildPath),
    // 因为开发环境中，chunkhash与HotModuleReplacementPlugin有冲突，所以两个环境分别设置
    filename: !isDev
      ? "static/js/[name].[chunkhash:8].js"
      : "js/[name].[hash:8].js",
    // filename: "static/js/[name].[chunkhash:8].js",
  },
  resolve: {
    extensions: [".js", ".tsx", ".jsx", ".ts"], //这几个后缀名的文件后缀可以省略不写
    alias: {
      "@components": path.join(__dirname, "./src/components"), //这样 @就表示根目录src这个路径
      "@pages": path.join(__dirname, "./src/pages"),
      "@style": path.join(__dirname, "./src/style"),

      // "react-dom": "@hot-loader/react-dom",
    },
  },
  module: {
    rules: [
      {
        test: /\.(js|ts)x?$/, //jsx或者tsx文件
        exclude: /(node_modules)/, // 排除node_modules
        use: {
          loader: "babel-loader",
          // 开启缓存
          options: { cacheDirectory: true },
        },
      },

      {
        test: /\.scss$/,
        use: [
          MiniCssExtractPlugin.loader,
          "css-loader",
          {
            loader: "sass-loader",
            options: {
              implementation: require("dart-sass"),
            },
          },
        ],
        include: /src/,
      },
      {
        test: /\.css$/,
        use: [MiniCssExtractPlugin.loader, "css-loader"],
        include: /node_modules/,
      },
      {
        test: /\.module\.css$/,
        use: [
          {
            loader: MiniCssExtractPlugin.loader,
            options: {
              hmr: isDev,
              reloadAll: true,
            },
          },
          {
            loader: "css-loader",
            // filename:'css/[name].[hash:8].css',
            options: {
              import: true,
              modules: {
                localIdentName: "[path][name]__[local]--[hash:base64:5]",
              },
              importLoaders: 1,
            },
          },
          "postcss-loader",
          {
            loader: "sass-loader",
            options: {
              implementation: require("dart-sass"),
            },
          },
        ],
        include: /src/,
      },
      {
        test: /\.(png|jpg|gif|woff|ttf)$/,
        use: [
          {
            loader: "file-loader",
            options: {
              name: "static/assert/[name].[hash:8].[ext]",
            },
          },
        ],
      },
      {
        test: /\.svg$/,
        use: [
          {
            loader: "svg-sprite-loader",
            options: {},
          },
          // { loader: "svgo-loader", options: {} },
        ],
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: path.join(__dirname, "public/index.html"),
      title: "我得博客",
      filename: "index.html",
    }),
    new MiniCssExtractPlugin({
      filename: "static/css/[name]index.css",
    }),

    new CopyWebpackPlugin({
      patterns: [
        {
          from: __dirname + "/public/md",
          to: __dirname + "/dist/md",
        },
        {
          from: __dirname + "/public/img",
          to: __dirname + "/dist/img",
        },
      ],
    }),
  ],
  // optimization: {
  //   minimizer: [
  //     new TerserPlugin({
  //       parallel: true,
  //       cache: true,
  //     }),
  //   ],
  // },
};

if (isDev) {
  config = webpackDev(config);
} else {
  config = webpackPro(config);
}

module.exports = config;
